<template>
  <div class="sendMessages mod-config">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item>
            <el-button size="small" type="primary" @click="exportBtn()">导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="dayin2()">打印</el-button>
          </el-form-item>

          <el-form-item>
            <el-radio-group @change="getDataList()" v-model="dataForm.selDateAdd" size="small">
              <!-- <el-radio-button label="全部"></el-radio-button> -->
              <el-radio-button label="0">今日</el-radio-button>
              <el-radio-button label="1">昨日</el-radio-button>
              <el-radio-button label="2">本周</el-radio-button>
              <el-radio-button label="3">其他</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="dataForm.selDateAdd == '3'">
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.startDate" format="yyyy-MM-dd HH:mm:ss"
              type="datetime" placeholder="开始日期"></el-date-picker>
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.endDate" format="yyyy-MM-dd HH:mm:ss"
              type="datetime" placeholder="结束日期"></el-date-picker>
          </el-form-item>


          <el-popover placement="top" width="160" v-model="visible">
            <div style=" margin: 0">
              <!-- <template v-for="(item,key) in selectedColumn" >
                    <el-checkbox v-model="columns[key]" :key="key">{{key}}</el-checkbox>
                </template> -->
              <el-checkbox-group v-model="column" @change="columnChange">
                <el-checkbox v-for="(item,index) in columns" :label="index" :key="index"> {{index}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-button slot="reference" size="small" style="margin-top: 2px;float: right;">选择列</el-button>
          </el-popover>
        </el-form>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item label="关键字">
            <el-input v-model="dataForm.key" placeholder="关键字" clearable></el-input>
          </el-form-item>
          <el-form-item label="预算">
            <el-input-number v-model="dataForm.yusuan" :min="0" :precision="1" :step="0.5" :max="10000"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>



        <el-table :data="dataList" border show-summary :summary-method="tableSum" ref="table" id="dataList" v-loading="dataListLoading"
          @selection-change="selectionChangeHandle" style="width: 100%;">
          <!-- <el-table-column type="selection" header-align="center" align="center" width="100"></el-table-column> -->

          <el-table-column prop="ruzhu_no" v-if="selectedColumn['登记单号']!=undefined" header-align="center" sortable
            align="center" label="登记单号">
          </el-table-column>
          <el-table-column prop="room_sign_num" v-if="selectedColumn['房间号']!=undefined" header-align="center" sortable
            align="center" label="房间号">
          </el-table-column>
          <el-table-column prop="panme" v-if="selectedColumn['客户姓名']!=undefined" header-align="center" sortable align="center"
            label="客户姓名">
          </el-table-column>
          <el-table-column prop="consumption" v-if="selectedColumn['费用合计']!=undefined" header-align="center" sortable align="center"
            label="费用合计">
          </el-table-column>
          <el-table-column prop="payment" v-if="selectedColumn['预收账款']!=undefined" sortable header-align="center"
            align="center" label="预收账款">
          </el-table-column>
          <el-table-column prop="deposit" v-if="selectedColumn['押金']!=undefined" sortable header-align="center"
            align="center" label="押金">
          </el-table-column>
          <el-table-column prop="pay_price" v-if="selectedColumn['信用卡预授权']!=undefined" header-align="center" sortable
            align="center" label="信用卡预授权">
          </el-table-column>
          <el-table-column prop="cha" v-if="selectedColumn['差额']!=undefined" header-align="center" sortable align="center"
            label="差额">
          </el-table-column>
          <el-table-column prop="signprice" v-if="selectedColumn['房费单价']!=undefined" header-align="center" sortable align="center"
            label="房费单价">
          </el-table-column>
          <el-table-column prop="yusuan" v-if="selectedColumn['预算房费']!=undefined" header-align="center" sortable align="center"
            label="预算房费">
          </el-table-column>
          <el-table-column prop="yingcui" v-if="selectedColumn['应催帐金额']!=undefined" header-align="center" sortable align="center"
            label="应催帐金额">
          </el-table-column>



        </el-table>

        <iframe id="print-iframe" style="display: none;"></iframe>

        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        chongzhiLoading: false,
        executeUserIdOp: [],
        dataForm: {
          key: '',
          startDate: '',
          endDate: '',
          yusuan:0,
          type: null,
          payType: null,
          state: null,
          selDateAdd: '0',
          executeUserId: null,
          viewRevoke: false
        },
        column: [
          '登记单号',
          '房间号',
          '客户姓名',
          '费用合计',
          '预收账款',
           '押金',
          '信用卡预授权',
          '差额',
          '房费单价',
          '预算房费',
          '应催帐金额'
        ],
        selectedColumn: {
         '登记单号': true,
                   '房间号': true,
                   '客户姓名': true,
                   '费用合计': true,
                   '预收账款': true,
                    '押金':true,
                   '信用卡预授权': true,
                   '差额': true,
                   '房费单价': true,
                   '预算房费': true,
                   '应催帐金额':true
        },
        columns: {
          '登记单号': true,
                    '房间号': true,
                    '客户姓名': true,
                    '费用合计': true,
                    '预收账款': true,
                     '押金':true,
                    '信用卡预授权': true,
                    '差额': true,
                    '房费单价': true,
                    '预算房费': true,
                    '应催帐金额':true
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        visible: false,
        shaixuan: false,
        baobiaoshuju: {
          //撤销金额
          cx_czMoney: 0,
          //撤销赠送金额
          cx_zsmoney: 0,
          //累计充值金额
          cz_czMoney: 0,
          //累计赠送金额
          cz_zsmoney: 0,
          //累计消费金额
          xf_xfMoney: 0.0,
          //今日已消费会员数
          TodayMemberConsumption: 0,
          //今日消费金额
          TodayConsumptionMoney: 0.0,
          //(TOP3)
          top_list: []
        },
        sellerIds: [],
        platformSeller: [],
        tableHeader: [{
            name: '登记单号',
            field: 'ruzhu_no'
          },
          {
              name: '房间号',
              field: 'room_sign_num'
          },
          {
                name: '客户姓名',
                field: 'panme'
              },
          {
              name: '费用合计',
              field: 'consumption'
          },
          {
              name: '预收账款',
              field: 'payment'
          },
          {
              name: '押金',
              field: 'deposit'
          },
          {
              name: '信用卡预授权',
              field: 'pay_price'
         },
         {
              name: '差额',
              field: 'cha'
          },
          {
              name: '房费单价',
              field: 'signprice'
         },
         {
              name: '预算房费',
              field: 'yusuan'
          },
          {
              name: '应催帐金额',
              field: 'yingcui'
         }

        ],
          sumfyhj:0,
                sumysq:0,
                sumyszk:0,
                sumcha:0,
                sumff:0,
                sumysff:0,
                sumycz:0,
                sumdeposit:0,
        countScore: 0
      };
    },
    components: {},
    activated() {
      this.getDataList();
      //this.remoteMethod();
      // this.getExecuteUserId();
    },
    methods: {
      gettime(time) {

        var year = time.getFullYear(); //获取完整的年份(4位,1970-????)
        var month = time.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var day = time.getDate(); //获取当前日(1-31)
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        var h = time.getHours(); // 获取当前小时数(0-23)
        var s = time.getMinutes(); // 获取当前分钟数(0-59)
        var a = time.getSeconds();
        if (h < 10) {
          h = "0" + h;
        }
        if (s < 10) {
          s = "0" + s;
        }
        if (a < 10) {
          a = "0" + a;
        }

        var dateString = year + "-" + month + "-" + day + "  " + h + ":" + s + ":" + a;
        return dateString;
      },
      tableSum(param) {

        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (column.label == '费用合计') {
            sums[index] = 0
            sums[index] += this.sumfyhj;
          }

          if (column.label == '预收账款') {
            sums[index] = 0
            sums[index] += this.sumyszk;
          }

          if (column.label == '押金') {
            sums[index] = 0
            sums[index] += this.sumdeposit;
          }
          if (column.label == '信用卡预授权') {
            sums[index] = 0
            sums[index] += this.sumysq;
          }

          if (column.label == '差额') {
            sums[index] = 0
            sums[index] += this.sumcha;
          }
          if (column.label == '房费单价') {
            sums[index] = 0
            sums[index] += this.sumff;
          }

          if (column.label == '预算房费') {
            sums[index] = 0
            sums[index] += this.sumysff;
          }
          if (column.label == '应催帐金额') {
            sums[index] = 0
            sums[index] += this.sumycz;
          }
           })
        return sums;
      },

      columnChange() {

        this.selectedColumn = {}
        this.column.forEach(item => {
          this.selectedColumn[item] = true
        })
      },
      dayin2() {

        var number = 0;
        for (var i = 0; i < this.tableHeader.length; i++) {
          if (this.selectedColumn[this.tableHeader[i].name]) {
            number += 1;
          }
        }

        var style = [
          '<style>',
          'body{font-size: 12px; color: #666;}',
          'table{width: 100%; border-collapse: collapse; border-spacing: 0;border-bottom:1px solid #ccc;}',
          'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc;  text-align: right; font-size: 12px; color: #666;}',
          'a{color: #666; text-decoration:none;}',
          '*.layui-hide{display: none}',
          '</style>'
        ].join('');
        //头部html
        var table =
          '<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;"><thead class="has-gutter"><tr class="">';
        table +=
          '<th style="text-align:center; width:100%; line-height:38px;font-size:20px;font-weight:bold;" colspan="' +
          number + '" >换房情况报表</th>';

        table += '</tr><tr class="">';
        this.tableHeader.forEach((item, index) => {
          if (this.selectedColumn[item.name]) {
            table +=
              '<th colspan="1" rowspan="1" class="el-table_1_column_2  is-center is-leaf"><div class="cell">' +
              item.name + '</div></th>';
          }
        });
        table += '</tr></thead><tbody>';
        //身体
        this.dataList.forEach((item, index) => {
          table += '<tr class="">';
          if (this.selectedColumn["登记单号"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.ruzhu_no + '</span></div>' + '</td>';
          }
          if (this.selectedColumn["房间号"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.room_sign_num + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["客户姓名"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.panme + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["费用合计"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.consumption + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["预收账款"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.payment + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["押金"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.deposit + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["信用卡预授权"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.pay_price + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["差额"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.cha + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["房费单价"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.signprice + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["预算房费"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.yusuan + '</span></div>' + '</td>';

          }
          if (this.selectedColumn["应催帐金额"]) {
            table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
              '<span>' + item.yingcui + '</span></div>' + '</td>';

          }

          table += '</tr>';

          console.log(item);
        });
        table += '<tr class="">';
       if (this.selectedColumn["登记单号"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>总计</span></div>' + '</td>';
       }
       if (this.selectedColumn["房间号"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span></span></div>' + '</td>';

       }
       if (this.selectedColumn["客户姓名"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span></span></div>' + '</td>';

       }
       if (this.selectedColumn["费用合计"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumfyhj + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["预收账款"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumyszk + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["押金"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' +  this.sumdeposit + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["信用卡预授权"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumysq + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["差额"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumcha + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["房费单价"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumff + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["预算房费"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumysff + '</span></div>' + '</td>';

       }
       if (this.selectedColumn["应催帐金额"]) {
         table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' +
           '<span>' + this.sumycz + '</span></div>' + '</td>';

       }
        table += '</tr>';


        table += '</tbody></table>';
        table +=
          '<div style="width: 100%;text-align: right;">' +
          '<span style="margin-right: 20px;">打印时间：' +
          this.moment(new Date()) +
          '</span>' +
          '<span>打印人：' +
          this.$store.state.user.name +
          '</span>' +
          '</div>';

        var iframe = document.getElementById('print-iframe');
        var doc = null;
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
        doc.write(style + table);
        doc.close();
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf('MSIE') > 0) {
          document.body.removeChild(iframe);
        }
      },
      selectSeller(id, value) {
        this.getDataList();
        this.getExecuteUserId();
      },
      //exportBtn导出
      exportBtn() {
        window.open(this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/czexcel_export`));

      },
      moment(date) {
        return moment(date).format('YYYY-MM-DD');
      },

      // 获取数据列表
      getDataList() {
        if (this.dataForm.startDate != null && this.dataForm.startDate != "") {
          if (this.dataForm.startDate instanceof Date) {
            this.dataForm.startDate = this.gettime(this.dataForm.startDate);
          }

        }
        if (this.dataForm.endDate != null && this.dataForm.endDate != "") {
          if (this.dataForm.endDate instanceof Date) {
            this.dataForm.endDate = this.gettime(this.dataForm.endDate);
          }

        }
        this.dataListLoading = true;
        var ids = '';
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ',';
          });
          ids = ids.substring(0, ids.length - 1);
        }
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinpeople/collection'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            ...this.dataForm
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {

            this.dataList = data.THotelFloorRoomCheckinPeople.list;
            this.totalPage = data.THotelFloorRoomCheckinPeople.size;
            this.sumfyhj = data.THotelFloorRoomCheckinPeople.sumfyhj;
            this.sumysq = data.THotelFloorRoomCheckinPeople.sumysq;
            this.sumyszk = data.THotelFloorRoomCheckinPeople.sumyszk;
            this.sumcha = data.THotelFloorRoomCheckinPeople.sumcha;
            this.sumff = data.THotelFloorRoomCheckinPeople.sumff;
            this.sumysff = data.THotelFloorRoomCheckinPeople.sumysff;
              this.sumycz = data.THotelFloorRoomCheckinPeople.sumycz;
                this.sumdeposit = data.THotelFloorRoomCheckinPeople.sumdeposit;

          } else {
            this.dataList = [];
            this.totalPage = 0;
           this.sumfyhj =0;
           this.sumysq = 0;
           this.sumyszk = 0;
           this.sumcha =0;
           this.sumff = 0;
           this.sumysff = 0;
             this.sumycz = 0;
           this.sumdeposit=0;
          }
          this.dataListLoading = false;
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      // 删除
      revoke(id) {
        this.$confirm(`确定进行撤销操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/hotel/hotelscore/revoke/${id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      }
    }
  };
</script>

<style>
  .memberreport {
    margin-bottom: 18px;
  }

  .memberreport .memberlistreport .memberreportsmbox {
    padding-left: 20px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .fr {
    float: right;
  }

  a {
    text-decoration: none;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .amountcolor6 {
    color: #ff5400;
  }

  .memberreport .memberlistreport .membernumber {
    font-size: 34px;
  }

  .memberreport .memberlistreport .mumberunit {
    font-size: 18px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .fl {
    float: left;
  }

  .colorff {
    color: #f00;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box .paright {
    padding-right: 0;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-top-box {
    height: 90px;
    width: 100%;
  }

  .memberreport .memberlistreport .center-top-box li {
    width: 100%;
    height: 30px;
    overflow: hidden;
    margin: 0;
  }

  .memberreport .memberlistreport .top-list {
    height: 30px;
    line-height: 30px;
  }

  .memberreport .memberlistreport .membertopname {
    display: block;
  }

  .memberreport .memberlistreport .center-top-box li .membertopmoney {
    height: 30px;
  }

  .memberreport .memberlistreport .center-top-box li .money {
    font-size: 20px;
    color: #ff5400;
  }

/*  .el-checkbox.el-checkbox {
    margin-left: 30px;
  } */
</style>
